<template>
  <div class="container">
    <div class="app-container">
      <el-tree node-key="id" default-expand-all :data="depts" :props="defaultProps" :expand-on-click-node="false">
        <template #default="{ data }">
          <div style="display: flex; align-items: center; justify-content: space-between;width: 100%;">
            <span>{{ data.name }}</span>
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <div style="width: 80px;">{{ data.managerName }}</div>
              <div>
                <el-dropdown @command="handleCommand(data.id, $event)">
                  <span>操作
                    <i class="el-icon-arrow-down" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
    <HrDialog :id="`${id}`" ref="hrDialog" :visible.sync="dialogVisible" :depts="deptsOriginal" @refresh="getDepartmentList" />
  </div>
</template>
<script>
import { getDepartmentList, deleteDepartment } from '@/api/department'
import { convert2Tree } from '@/utils'
import HrDialog from './components/HrDilog.vue'
export default {
  name: 'Department',
  components: {
    HrDialog
  },
  data() {
    return {
      depts: [],
      deptsOriginal: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false,
      id: -1
    }
  },
  computed: {
    codes() {
      return this.depts.map(item => item.code)
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const res = await getDepartmentList()
      this.deptsOriginal = res
      // this.depts = res
      // 将数据转换为树形结构
      this.depts = convert2Tree(res)
    },
    addSubDepartment(data) {
      this.dialogVisible = true
      this.form.name = ''
      this.form.pid = data.id
    },
    handleCommand(id, type) {
      // console.log(command)
      // const [type, id] = command.split('/')
      if (type === 'add') {
        this.id = id
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.hrDialog.formData.pid = id
        })
      } else if (type === 'edit') {
        this.id = id
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.hrDialog.getDepartmentDetail()
        })
      } else if (type === 'delete') {
        this.$confirm('确定删除该部门吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
            await deleteDepartment(id)
            this.$message.success('删除成功')
          } catch (error) {
            this.$message.error('删除失败')
          }
          this.getDepartmentList()
        }).catch(() => {
          // this.$message.error('删除失败')
        })
      }
    }
  }
}
</script>
<style scoped>
  .app-container {
    padding: 30px 140px;
    font-size: 14px;
  }
  .tree-manager {
    width: 50px;
    display: inline-block;
    margin: 10px;
}
</style>
